<template>
  <div class="sceditor">
    <Editor v-model="contentValue" :init="init" :disabled="disabled" :placeholder="placeholder" @onClick="onClick"/>
  </div>
</template>

<script>
//import API from "@/api";
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver'
import 'tinymce/icons/default'
import 'tinymce/models/dom'
import http from "@/utils/request"

// 引入编辑器插件
import 'tinymce/plugins/code'  //编辑源码
import 'tinymce/plugins/image'  //插入编辑图片
import 'tinymce/plugins/media'  //插入视频
import 'tinymce/plugins/link'  //超链接
import 'tinymce/plugins/preview'//预览
import 'tinymce/plugins/template'//模板
import 'tinymce/plugins/table'  //表格
import 'tinymce/plugins/pagebreak'  //分页
import 'tinymce/plugins/lists'  //列
import 'tinymce/plugins/advlist'  //列
import 'tinymce/plugins/quickbars'
import {ref} from "vue";
import config from "@/config";  //快速工具条

export default {
  components: {
    Editor
  },
  props: {
    modelValue: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: ""
    },
    height: {
      type: Number,
      default: 300,
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'code image media link preview table quickbars template pagebreak lists advlist'
    },
    toolbar: {
      type: [String, Array],
      default: 'undo redo |  forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
					alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
					image media table template preview | code selectall'
    },
    templates: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      init: {
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        content_css: "/tinymce/skins/content/default/content.css",
        menubar: false,
        statusbar: true,
        plugins: this.plugins,
        toolbar: this.toolbar,
        toolbar_mode: 'sliding',
        font_size_formats: '12px 14px 16px 18px 22px 24px 36px 72px',
        height: this.height,
        placeholder: this.placeholder,
        branding: false,
        resize: true,
        elementpath: true,
        content_style: "",
        templates: this.templates,
        quickbars_selection_toolbar: 'forecolor backcolor bold italic underline strikethrough link',
        quickbars_image_toolbar: 'alignleft aligncenter alignright',
        quickbars_insert_toolbar: false,
        image_caption: true,
        image_advtab: true,
        convert_urls: false,
        images_upload_handler: function (blobInfo) {
          return new Promise(async (resolve, reject) => {
            const data = new FormData();
            data.append("file", blobInfo.blob(), blobInfo.filename());
            const fileUrl=config.REMOTE_URL+ "/oss/upload"

            let res = await http.post(fileUrl, data);
            if (res.code === 200) {
              resolve(res.data.url)
            } else {
              reject("上传图片失败")
            }
            // API.common.upload.post(data).then((res) => {
            // 	resolve(res.data.src)
            // }).catch(() => {
            // 	reject("Image upload failed")
            // })
          })
        },
        setup: function (editor) {
          editor.on('init', function () {
            this.getBody().style.fontSize = '14px';
          })
          editor.on('OpenWindow', function (e) {
            //FIX 编辑器在el-drawer中，编辑器的弹框无法获得焦点
            var D = document.querySelector('.el-drawer.open')
            var E = e.target.editorContainer
            if (D && D.contains(E)) {
              var nowDA = document.activeElement
              setTimeout(() => {
                document.activeElement.blur()
                nowDA.focus()
              }, 0)
            }
          })
        },
        ...this.options
      },
      contentValue: this.modelValue
    }
  },
  watch: {
    modelValue(val) {
      this.contentValue = val
    },
    contentValue(val) {
      this.$emit('update:modelValue', val);
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    }
  }
}
</script>

<style>
</style>
